<template>
  <div v-loading="loading" class="order_detail">
    <div>
      <el-row class="order_detail_row" :gutter="15">
        <!-- jurisdictionIsShow == '1' -->
        <el-col
          class="order_detail_content"
          :span="activeName == 'first' && auditReportIsShow ? 16 : 24"
        >
          <!-- //预览 -->
          <!-- 头部导航 -->
          <el-card id="top_card" class="top_nav" :shadow="shadowShow">
            <img class="back_box" src="@/assets/img/back.png" @click="goBack" />
            <div class="content_box">
              <el-row class="title">
                <el-col :span="24" class="title_info_item">
                  <img src="@/assets/img/order_yachiYellow.png" alt />
                  <span>{{ orderForm.id }}</span>
                </el-col>
              </el-row>
              <el-row v-if="dataObj && dataObj.order">
                <el-col :span="dataObj.order.orderStatus == 1 ? 24 : isExamine ? 14 : 18">
                  <el-row class="title_info">
                    <!-- v-show="!auditReportIsShow" -->
                    <div class="title_info_item">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('caseorder.yulan.yulan2')"
                        placement="top"
                      >
                        <span class="ellipsis" style="max-width: 90px"
                          >{{ $t('caseorder.yulan.yulan2') }}：</span
                        >
                      </el-tooltip>

                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="(dataObj.order && dataObj.order.patientName) || '-'"
                        placement="top"
                      >
                        <span class="ellipsis" style="max-width: 90px">{{
                          (dataObj.order && dataObj.order.patientName) || '-'
                        }}</span>
                      </el-tooltip>
                    </div>
                    <div class="title_info_item">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('caseorder.yulan.yulan6')"
                        placement="top"
                      >
                        <span class="ellipsis" style="max-width: 90px"
                          >{{ $t('caseorder.yulan.yulan6') }}：</span
                        >
                      </el-tooltip>

                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('caseorder.yulan.yulan7')"
                        placement="top"
                      >
                        <span
                          class="ellipsis"
                          style="max-width: 90px"
                          v-if="dataObj.order && dataObj.order.orderDataType == 1"
                          >{{ $t('caseorder.yulan.yulan7') }}</span
                        >
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('caseorder.yulan.yulan8')"
                        placement="top"
                      >
                        <span
                          class="ellipsis"
                          style="max-width: 90px"
                          v-if="dataObj.order && dataObj.order.orderDataType == 2"
                          >{{ $t('caseorder.yulan.yulan8') }}</span
                        >
                      </el-tooltip>

                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('caseorder.yulan.yulan9')"
                        placement="top"
                      >
                        <span
                          class="ellipsis"
                          style="max-width: 90px"
                          v-if="dataObj.order && dataObj.order.orderDataType == 3"
                          >{{ $t('caseorder.yulan.yulan9') }}</span
                        >
                      </el-tooltip>
                    </div>

                    <div class="title_info_item">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('caseorder.yulan.yulan3')"
                        placement="top"
                      >
                        <span class="ellipsis" style="max-width: 90px"
                          >{{ $t('caseorder.yulan.yulan3') }}：</span
                        >
                      </el-tooltip>

                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="(dataObj.order && dataObj.order.doctorName) || '-'"
                        placement="top"
                      >
                        <span class="ellipsis" style="max-width: 90px">{{
                          (dataObj.order && dataObj.order.doctorName) || '-'
                        }}</span>
                      </el-tooltip>
                    </div>
                    <!-- 诊所端 -->
                    <div class="title_info_item" v-show="organizedType == 1">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('caseorder.yulan.yulan108') + '：'"
                        placement="top"
                      >
                        <span class="ellipsis" style="max-width: 90px"
                          >{{ $t('caseorder.yulan.yulan108') }}：</span
                        >
                      </el-tooltip>

                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="dataObj.order ? dataObj.order.skillDeptName : '/'"
                        placement="top"
                      >
                        <span class="ellipsis" style="max-width: 90px">{{
                          dataObj.order ? dataObj.order.skillDeptName : '/'
                        }}</span>
                      </el-tooltip>
                    </div>
                    <!-- 技工所端 -->
                    <div class="title_info_item" v-show="organizedType == 2">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('caseorder.yulan.yulan4') + '：'"
                        placement="top"
                      >
                        <span class="ellipsis" style="max-width: 90px"
                          >{{ $t('caseorder.yulan.yulan4') }}：</span
                        >
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="
                          dataObj.order && dataObj.order.creatorDeptName
                            ? dataObj.order.creatorDeptName
                            : '/'
                        "
                        placement="top"
                      >
                        <span class="ellipsis" style="max-width: 90px">{{
                          dataObj.order && dataObj.order.creatorDeptName
                            ? dataObj.order.creatorDeptName
                            : '/'
                        }}</span>
                      </el-tooltip>
                    </div>

                    <div class="title_info_item" v-show="!auditReportIsShow">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('caseorder.yulan.yulan5') + '：'"
                        placement="top"
                      >
                        <span class="ellipsis" style="max-width: 90px"
                          >{{ $t('caseorder.yulan.yulan5') }}：</span
                        >
                      </el-tooltip>

                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="(dataObj.order && dataObj.order.createDate) || '-'"
                        placement="top"
                      >
                        <span class="ellipsis" style="max-width: 130px">{{
                          (dataObj.order && dataObj.order.createDate) || '-'
                        }}</span>
                      </el-tooltip>
                    </div>

                    <!-- 诊所保持原来不变jurisdictionIsShow === '1' && -->
                    <div class="report_item" v-if="organizedType == 1 && modelCompleted">
                      <!--  -->
                      <div
                        v-if="
                          activeName == 'first' &&
                          dataObj.order &&
                          (dataObj.order.auditStatus == 1 || dataObj.order.auditStatus == 2) &&
                          (typeof dataObj.order.orderReviewReportCheck === 'number'
                            ? dataObj.order.orderReviewReportCheck === 1
                            : !dataObj.order.orderReviewReportCheck)
                        "
                      >
                        <el-button :size="tableButtonSize" @click="openExamineBox(dataObj)">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            :content="$t('add.add064')"
                            placement="top"
                          >
                            <span style="max-width: 130px" class="ellipsis">{{
                              $t('add.add064')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                      </div>
                    </div>

                    <div class="report_item" v-if="organizedType == 2 && modelCompleted">
                      <div v-if="activeName == 'first' && jurisdictionIsShow === '1'">
                        <el-button :size="tableButtonSize" @click="openExamineBox(dataObj)">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            :content="$t('add.add064')"
                            placement="top"
                          >
                            <span style="max-width: 130px" class="ellipsis">{{
                              $t('add.add064')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                      </div>
                    </div>
                  </el-row>
                </el-col>
                <!-- 如果是暂存 拒绝接单状态跳转过来的就没有 dataObj.order.orderStatus !== 1 -->
                <el-col
                  v-if="(!isExamine && modelCompleted && !isOrderDownload) || isOverdue"
                  :span="isOverdue ? 14 : 6"
                  class="action_box"
                >
                  <div v-if="dataObj.order && dataObj.order.orderStatus !== -1">
                    <!-- 诊所 -->
                    <div v-if="organizedType == 1" style="display: flex; justify-content: end">
                      <!-- 暂存 -->
                      <div v-if="dataObj.order.orderStatus == 0">
                        <!-- 下单 -->
                        <el-button
                          :size="tableButtonSize"
                          @click="orderHandle(dataObj.order, 'xiadan')"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="$t('caseorder.anli23')"
                            placement="top"
                          >
                            <span style="width: 80px" class="ellipsis">{{
                              $t('caseorder.anli23')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                        <!-- 取消订单 -->
                        <el-button
                          :loading="cancleLoading"
                          slot="reference"
                          :size="tableButtonSize"
                          @click="orderHandle(dataObj.order, 'cancle')"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="$t('caseorder.anli24')"
                            placement="top"
                          >
                            <span style="width: 80px" class="ellipsis">{{
                              $t('caseorder.anli24')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                      </div>
                      <!-- 待接单 -->
                      <div v-if="dataObj.order.orderStatus == 1">
                        <!-- 取消订单 -->

                        <el-button
                          :loading="cancleLoading"
                          slot="reference"
                          :size="tableButtonSize"
                          @click="orderHandle(dataObj.order, 'cancle')"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="$t('caseorder.anli24')"
                            placement="top"
                          >
                            <span style="width: 80px" class="ellipsis">{{
                              $t('caseorder.anli24')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                      </div>
                      <!-- 已接单 -->
                      <div v-if="dataObj.order.orderStatus == 2">
                        <!-- 取消订单 -->
                        <el-button
                          :loading="cancleLoading"
                          slot="reference"
                          :size="tableButtonSize"
                          @click="orderHandle(dataObj.order, 'cancle')"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="$t('caseorder.anli24')"
                            placement="top"
                          >
                            <span style="width: 80px" class="ellipsis">{{
                              $t('caseorder.anli24')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                      </div>
                      <!-- 待设计 和已接单一样 -->
                      <!-- <div v-if="dataObj.order.orderStatus == 2">
</div>-->
                      <!-- 待确认设计 -->
                      <div
                        v-if="
                          dataObj.order.orderDesignStatus == 'EXIST' &&
                          dataObj.order.orderStatus == 3
                        "
                      >
                        <!-- 设计管理 -->
                        <el-dropdown size @command="handleCommand">
                          <span class="el-dropdown-link">
                            {{ $t('caseorder.anli26') }}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown">
                            <!-- 确认设计 -->
                            <el-dropdown-item :command="beforeHandleCommand(dataObj.order.id, 'a')">
                              {{ $t('caseorder.anli27') }}
                            </el-dropdown-item>
                            <!-- 重新设计 -->
                            <el-dropdown-item :command="beforeHandleCommand(dataObj.order.id, 'b')">
                              {{ $t('caseorder.anli28') }}
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                        <!-- 取消订单 -->
                        <el-button
                          :loading="cancleLoading"
                          slot="reference"
                          :size="tableButtonSize"
                          @click="orderHandle(dataObj.order, 'cancle')"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="$t('caseorder.anli24')"
                            placement="top"
                          >
                            <span style="width: 80px" class="ellipsis">{{
                              $t('caseorder.anli24')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                      </div>
                      <!-- 已确认设计 -->
                      <div
                        v-if="
                          dataObj.order.orderDesignStatus == 'AFFIRM' &&
                          dataObj.order.orderStatus == 3
                        "
                      >
                        <!-- 取消订单 -->
                        <el-button
                          :loading="cancleLoading"
                          slot="reference"
                          :size="tableButtonSize"
                          @click="orderHandle(dataObj.order, 'cancle')"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="$t('caseorder.anli24')"
                            placement="top"
                          >
                            <span style="width: 80px" class="ellipsis">{{
                              $t('caseorder.anli24')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                      </div>
                      <!-- 重新设计 -->
                      <div
                        v-if="
                          dataObj.order.orderDesignStatus == 'AGAIN' &&
                          dataObj.order.orderStatus == 3
                        "
                      >
                        <!-- 取消订单 -->
                        <el-button
                          :loading="cancleLoading"
                          slot="reference"
                          :size="tableButtonSize"
                          @click="orderHandle(dataObj.order, 'cancle')"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="$t('caseorder.anli24')"
                            placement="top"
                          >
                            <span style="width: 80px" class="ellipsis">{{
                              $t('caseorder.anli24')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                      </div>
                      <!-- 待发货 -->
                      <div
                        v-if="
                          dataObj.order.orderLogisticsStatus == 'AGAIN' &&
                          dataObj.order.orderStatus == 8
                        "
                      >
                        <el-button
                          :loading="cancleLoading"
                          slot="reference"
                          :size="tableButtonSize"
                          @click="orderHandle(dataObj.order, 'cancle')"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="$t('caseorder.anli24')"
                            placement="top"
                          >
                            <span style="width: 80px" class="ellipsis">{{
                              $t('caseorder.anli24')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                      </div>
                      <!-- 待收货 -->
                      <div
                        v-if="
                          dataObj.order.orderLogisticsStatus == 'EXIST' &&
                          dataObj.order.orderStatus == 8
                        "
                      >
                        <el-dropdown size @command="handleCommand">
                          <span class="el-dropdown-link">
                            <!-- 收发货管理 -->
                            {{ $t('caseorder.anli29') }}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown">
                            <!-- 确认收货 -->
                            <el-dropdown-item :command="beforeHandleCommand(dataObj.order.id, 'c')">
                              {{ $t('caseorder.anli30') }}
                            </el-dropdown-item>
                            <!-- 重新发货 -->
                            <el-dropdown-item :command="beforeHandleCommand(dataObj.order.id, 'd')">
                              {{ $t('caseorder.anli31') }}
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                      <!-- 已拒绝 -->
                      <div v-if="dataObj.order.orderStatus == 4">
                        <!-- 重新下单 -->
                        <el-button
                          slot="reference"
                          :size="tableButtonSize"
                          @click="orderHandle(dataObj.order, 'xiadan')"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="$t('caseorder.anli25')"
                            placement="top"
                          >
                            <span style="width: 80px" class="ellipsis">{{
                              $t('caseorder.anli25')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                        <!-- 取消订单 -->
                        <el-button
                          :loading="cancleLoading"
                          slot="reference"
                          :size="tableButtonSize"
                          @click="orderHandle(dataObj.order, 'cancle')"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="$t('caseorder.anli24')"
                            placement="top"
                          >
                            <span style="width: 80px" class="ellipsis">{{
                              $t('caseorder.anli24')
                            }}</span>
                          </el-tooltip>
                        </el-button>
                      </div>
                    </div>
                    <!-- 技工所 -->
                    <div v-if="organizedType == 2">
                      <!-- 发送端是诊所 -->
                      <div
                        v-if="dataObj.order.skillDeptId != dataObj.order.creatorDeptId"
                        style="display: flex; justify-content: end"
                      >
                        <!-- 待接单 -->
                        <div
                          v-if="
                            dataObj.order.orderStatus == 1 &&
                            (!jurisdictionIsShow || jurisdictionIsShow == '0')
                          "
                        >
                          <!-- 确认接单 -->
                          <el-button :size="tableButtonSize" @click="orderAffirm">
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.yulan.yulan29')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.yulan.yulan29')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                          <!-- 拒绝接单 -->
                          <el-button :size="tableButtonSize" @click="orderReject">
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.yulan.yulan28')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.yulan.yulan28')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                        <!-- 已接单 -->
                        <div v-if="dataObj.order.orderStatus == 2">
                          <!-- 上传设计 -->
                          <el-button
                            v-if="!dataObj.order.orderDesignAutoCheck"
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'upload')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli21')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli21')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                          <!-- 发货 -->
                          <el-button
                            v-if="dataObj.order.orderDesignAutoCheck"
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'send')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli22')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli22')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                        <!-- 重新设计 -->
                        <div
                          v-if="
                            dataObj.order.orderStatus == 3 &&
                            dataObj.order.orderDesignStatus == 'AGAIN'
                          "
                        >
                          <!-- 上传设计 -->
                          <el-button
                            v-if="!dataObj.order.orderDesignAutoCheck"
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'upload')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli21')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli21')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                        <!-- 待确认设计 -->
                        <div
                          v-if="
                            dataObj.order.orderDesignStatus == 'EXIST' &&
                            dataObj.order.orderStatus == 3
                          "
                        >
                          <!-- 上传设计 -->
                          <el-button
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'upload')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli21')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli21')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                        <!-- 已确认设计 -->
                        <div
                          v-if="
                            dataObj.order.orderDesignStatus == 'AFFIRM' &&
                            dataObj.order.orderStatus == 3
                          "
                        >
                          <!-- 发货 -->
                          <el-button
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'send')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli22')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli22')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                        <!-- 待发货 -->
                        <div
                          v-if="
                            dataObj.order.orderLogisticsStatus == 'AGAIN' &&
                            dataObj.order.orderStatus == 8
                          "
                        >
                          <!-- 发货 -->
                          <el-button
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'send')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli22')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli22')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                      </div>
                      <!-- 发送端是技工所 -->
                      <div
                        v-if="dataObj.order.skillDeptId == dataObj.order.creatorDeptId"
                        style="display: flex"
                      >
                        <!-- 待接单 -->
                        <div
                          v-if="
                            dataObj.order.orderStatus == 1 &&
                            (!jurisdictionIsShow || jurisdictionIsShow == '0')
                          "
                        >
                          <!-- 确认接单 -->
                          <el-button :size="tableButtonSize" @click="orderAffirm">
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.yulan.yulan29')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.yulan.yulan29')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                          <!-- 拒绝接单 -->
                          <el-button :size="tableButtonSize" @click="orderReject">
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.yulan.yulan28')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.yulan.yulan28')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                        <!-- 已接单 -->
                        <div v-if="dataObj.order.orderStatus == 2">
                          <!-- 上传设计 -->
                          <el-button
                            v-if="!dataObj.order.orderDesignAutoCheck"
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'upload')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli21')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli21')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                          <!-- 发货 -->
                          <el-button
                            v-if="dataObj.order.orderDesignAutoCheck"
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'send')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli22')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli22')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                        <!-- 重新设计 -->
                        <div
                          v-if="
                            dataObj.order.orderStatus == 3 &&
                            dataObj.order.orderDesignStatus == 'AGAIN'
                          "
                        >
                          <!-- 上传设计 -->
                          <el-button
                            v-if="!dataObj.order.orderDesignAutoCheck"
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'upload')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli21')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli21')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                        <!-- 待确认设计 -->
                        <div
                          v-if="
                            dataObj.order.orderDesignStatus == 'EXIST' &&
                            dataObj.order.orderStatus == 3
                          "
                        >
                          <!-- 设计管理 -->
                          <el-dropdown size @command="handleCommand">
                            <span class="el-dropdown-link">
                              {{ $t('caseorder.anli26') }}
                              <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                              <!-- 确认设计 -->
                              <el-dropdown-item
                                :command="beforeHandleCommand(dataObj.order.id, 'a')"
                              >
                                {{ $t('caseorder.anli27') }}
                              </el-dropdown-item>
                              <!-- 重新设计 -->
                              <el-dropdown-item
                                :command="beforeHandleCommand(dataObj.order.id, 'b')"
                              >
                                {{ $t('caseorder.anli28') }}
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                          <!-- 上传设计 -->
                          <el-button
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'upload')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli21')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli21')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                        <!-- 已确认设计 -->
                        <div
                          v-if="
                            dataObj.order.orderDesignStatus == 'AFFIRM' &&
                            dataObj.order.orderStatus == 3
                          "
                        >
                          <!-- 发货 -->
                          <el-button
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'send')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli22')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli22')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                        <!-- 待发货 -->
                        <div
                          v-if="
                            dataObj.order.orderLogisticsStatus == 'AGAIN' &&
                            dataObj.order.orderStatus == 8
                          "
                        >
                          <!-- 发货 -->
                          <el-button
                            :size="tableButtonSize"
                            @click="orderHandle(dataObj.order, 'send')"
                          >
                            <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="$t('caseorder.anli22')"
                              placement="top"
                            >
                              <span style="width: 80px" class="ellipsis">{{
                                $t('caseorder.anli22')
                              }}</span>
                            </el-tooltip>
                          </el-button>
                        </div>
                        <!-- 待收货 -->
                        <div
                          v-if="
                            dataObj.order.orderLogisticsStatus == 'EXIST' &&
                            dataObj.order.orderStatus == 8
                          "
                        >
                          <el-dropdown size @command="handleCommand">
                            <span class="el-dropdown-link">
                              <!-- 收发货管理 -->
                              {{ $t('caseorder.anli29') }}
                              <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                              <!-- 确认收货 -->
                              <el-dropdown-item
                                :command="beforeHandleCommand(dataObj.order.id, 'c')"
                              >
                                {{ $t('caseorder.anli30') }}
                              </el-dropdown-item>
                              <!-- 重新发货 -->
                              <el-dropdown-item
                                :command="beforeHandleCommand(dataObj.order.id, 'd')"
                              >
                                {{ $t('caseorder.anli31') }}
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>

                <el-col v-else-if="isExamine" :span="10" class="order_box">
                  <el-form ref="orderForm" inline="true" :model="orderForm" :rules="orderRules">
                    <el-col :span="11" class="select_jgs">
                      <el-form-item :label="$t('caseorder.anli34')" prop="skillDeptId">
                        <el-select
                          size="mini"
                          v-model="orderForm.skillDeptId"
                          clearable
                          :placeholder="$t('caseorder.anli35')"
                        >
                          <el-option
                            v-for="(item, index) in deptList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item :label="$t('add.add063')" prop="orderDesignAutoCheck">
                        <el-switch
                          v-model="orderForm.orderDesignAutoCheck"
                          active-color="#003e67"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="3">
                      <el-form-item>
                        <el-button
                          :loading="examineSubLoading"
                          :size="tableButtonSize"
                          @click="submitHandle"
                        >
                          {{ $t('caseorder.anli23') }}
                        </el-button>
                      </el-form-item>
                    </el-col>
                  </el-form>
                </el-col>
              </el-row>
            </div>

            <!-- 如果是暂存 拒绝接单状态跳转过来的就没有 -->
            <span v-if="!isExamine || isOverdue" class="status_box">
              <span class="status_item" v-if="organizedType == 1">
                <span v-if="dataObj.order.orderStatus == 0">{{ $t('add.add12') }}</span>
                <span v-if="dataObj.order.orderStatus == 1">{{ $t('add.add13') }}</span>
                <span v-if="dataObj.order.orderStatus == 2">
                  {{ $t('add.add14') }}
                  <!-- 待设计 -->
                </span>
                <span
                  v-if="
                    dataObj.order.orderStatus == 3 && dataObj.order.orderDesignStatus == 'AGAIN'
                  "
                  >{{ $t('add.add15') }}</span
                >
                <span
                  v-if="
                    dataObj.order.orderDesignStatus == 'EXIST' && dataObj.order.orderStatus == 3
                  "
                  >{{ $t('add.add16') }}</span
                >
                <span
                  v-if="
                    dataObj.order.orderDesignStatus == 'AFFIRM' && dataObj.order.orderStatus == 3
                  "
                  >{{ $t('add.add17') }}</span
                >
                <span
                  v-if="
                    dataObj.order.orderLogisticsStatus == 'AGAIN' && dataObj.order.orderStatus == 8
                  "
                  >{{ $t('add.add18') }}</span
                >
                <span
                  v-if="
                    dataObj.order.orderLogisticsStatus == 'EXIST' && dataObj.order.orderStatus == 8
                  "
                  >{{ $t('add.add19') }}</span
                >
                <span v-if="dataObj.order.orderStatus == 4">{{ $t('add.add20') }}</span>
                <span v-if="dataObj.order.orderStatus == 5">{{ $t('add.add145') }}</span>
                <span v-if="dataObj.order.orderStatus == 6">{{ $t('add.add22') }}</span>
                <span v-if="dataObj.order.orderStatus == -1">{{ $t('add.add062') }}</span>
              </span>
              <span class="status_item" v-if="organizedType == 2">
                <span v-if="dataObj.order.orderStatus == 0">{{ $t('add.add12') }}</span>
                <span v-if="dataObj.order.orderStatus == 1">{{ $t('add.add13') }}</span>
                <span v-if="dataObj.order.orderStatus == 2">
                  {{ $t('add.add14') }}
                  <!-- 待设计 -->
                </span>
                <!-- dataObj.order.orderStatus == 3 && dataObj.order.orderDesignStatus == 'AGAIN' 诊所 带设计 技工所 待确认设计-->
                <span
                  v-if="
                    dataObj.order.orderStatus == 3 && dataObj.order.orderDesignStatus == 'AGAIN'
                  "
                  >{{ $t('add.add23') }}</span
                >
                <span
                  v-if="
                    dataObj.order.orderDesignStatus == 'EXIST' && dataObj.order.orderStatus == 3
                  "
                  >{{ $t('add.add16') }}</span
                >
                <span
                  v-if="
                    dataObj.order.orderDesignStatus == 'AFFIRM' && dataObj.order.orderStatus == 3
                  "
                  >{{ $t('add.add17') }}</span
                >
                <span
                  v-if="
                    dataObj.order.orderLogisticsStatus == 'AGAIN' && dataObj.order.orderStatus == 8
                  "
                  >{{ $t('add.add18') }}</span
                >
                <span
                  v-if="
                    dataObj.order.orderLogisticsStatus == 'EXIST' && dataObj.order.orderStatus == 8
                  "
                  >{{ $t('add.add19') }}</span
                >
                <span v-if="dataObj.order.orderStatus == 4">{{ $t('add.add20') }}</span>
                <span v-if="dataObj.order.orderStatus == 5">{{ $t('add.add145') }}</span>
                <span v-if="dataObj.order.orderStatus == 6">{{ $t('add.add22') }}</span>
                <span v-if="dataObj.order.orderStatus == -1">{{ $t('add.add062') }}</span>
              </span>
            </span>
          </el-card>

          <!-- 预览 详情 消息 下载 加工消息 发货消息 -->
          <el-card class="order_info" id="order_info" :shadow="shadowShow">
            <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
              <el-tab-pane
                v-if="!isExamine || isOverdue"
                :label="$t('caseorder.yulan.yulan11')"
                name="first"
              >
                <template>
                  <div id="preview_box" class="preview_box">
                    <!-- <OrderPreview ref="OrderPreview" @showAction="showAction" :id="orderForm.id"
                      :isOrderDownload="isOrderDownload" :previewType="previewType" :oralCameraDisplay="oralCameraDisplay"  /> -->
                    <iframe
                      id="preview_iframe"
                      class="preview_iframe"
                      :src="iframeSrc"
                      :class="{ fullScreen: isFullScreen }"
                    ></iframe>
                    <madeScreenshots
                      ref="madeScreenshots"
                      v-show="madeScreenshots"
                      :res_form="res_form"
                      @closeScreenshot="madeScreenshots = false"
                      @changeData="changeScreenshotData"
                    />
                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane :label="$t('caseorder.yulan.yulan15')" name="second">
                <OrderDetail v-if="isNull(dataObj)" ref="orderDetail" />
              </el-tab-pane>
              <el-tab-pane
                v-if="(!isExamine && !isOrderDownload) || isOverdue"
                :label="$t('caseorder.yulan.yulan16')"
                name="third"
              >
                <Message v-if="activeName === 'third'" />
              </el-tab-pane>
              <el-tab-pane
                v-if="(!isExamine && !isOrderDownload) || isOverdue"
                :label="$t('add.add24')"
                name="seven"
              >
                <!-- :file-list-arr="designListArr"  -->
                <Fangan />
              </el-tab-pane>
              <el-tab-pane
                v-if="(!isExamine && !isOrderDownload) || isOverdue"
                :label="$t('caseorder.yulan.yulan17')"
                name="fourth"
              >
                <Download
                  :dataObj="dataObj"
                  :imgUrl="imgUrl"
                  :mouthImgs="mouthImgs"
                  ref="downloadRef"
                  @getIsOverdue="getIsOverdue"
                  v-if="activeName === 'fourth'"
                  :id="dataObj.order.id"
                  :patientName="dataObj.order.patientName"
                  :createDate="dataObj.order.createDate"
                />
              </el-tab-pane>
              <!-- <el-tab-pane :label="$t('caseorder.yulan.yulan18')" name="five">
                            <Processing />
            </el-tab-pane>-->
              <el-tab-pane
                v-if="(!isExamine && !isOrderDownload) || isOverdue"
                :label="$t('caseorder.yulan.yulan19')"
                name="six"
              >
                <Delivery ref="delivery" />
              </el-tab-pane>
            </el-tabs>
            <div class="refresh" @click="refresh">
              <img src="@/assets/img/order_ refresh.png" alt />
              <span>{{ $t('caseorder.yulan.yulan20') }}</span>
            </div>
          </el-card>
        </el-col>
        <!-- 诊所 && jurisdictionIsShow == '1' -->
        <el-col
          class="order_audit_report"
          v-if="activeName == 'first' && auditReportIsShow"
          :span="8"
        >
          <!-- 如果是未接单的就会到这个组件 -->
          <AuditReport
            v-if="dataObj.order && dataObj.order.orderStatus == 1"
            id="printTest"
            ref="auditReport"
            @audiChildren="audiChildren"
            @changeState="changeState"
            :isEdit="isEdit"
            :dataObj="dataObj"
            :acitonType="acitonType"
            @openScreenshot="openScreenshot"
          />
          <el-card
            style="height: 100%"
            :shadow="shadowShow"
            v-if="
              dataObj.order.orderStatus === 2 ||
              dataObj.order.orderStatus === 3 ||
              dataObj.order.orderStatus === 8 ||
              dataObj.order.orderStatus === 4 ||
              dataObj.order.orderStatus === 6
            "
          >
            <div class="report_preview_title">
              <h3>{{ $t('caseorder.anli82') }}</h3>
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="$t('caseorder.anli99')"
                  placement="bottom"
                >
                  <img @click="reportQRHandle()" src="@/assets/img/icon/qrCode.png" alt="" />
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="$t('caseorder.anli98')"
                  placement="bottom"
                >
                  <img @click="exportPdf()" src="@/assets/img/icon/export.png" alt="" />
                </el-tooltip>
              </div>
            </div>
            <!-- 如果拒绝接单或者接单就直接出现报告预览页面   -->

            <ReportPreview
              v-loading="reportPreviewLoading"
              ref="ReportPreview"
              :res_form="res_form"
            />
          </el-card>
        </el-col>
      </el-row>

      <!-- 上传设计 -->
      <UploadDesigns ref="uploaddesigns" @getSelectPageList="getSelectPageList" />
      <OrderSend ref="ordersend" @getSelectPageList="getSelectPageList" />
      <!-- 二维码 -->
      <el-dialog
        id="qrCodeDialog"
        :title="$t('caseorder.anli82')"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        width="300px"
      >
        <div id="qrCode" ref="qrCodeDiv" class="qr-code"></div>
        <div class="qrCode_box">
          <p>{{ res_form.reportTime ? res_form.reportTime : '-' }}</p>
          <el-button
            class="copy-link"
            type="text"
            :data-clipboard-text="codeUrl"
            @click="copyCodeUrl"
            >{{ $t('caseorder.anli95') }}</el-button
          >
        </div>
      </el-dialog>
    </div>

    <!-- 口内相机全屏(ifame里面不能完全实现全屏) -->
    <!-- 全屏状态 -->
    <div
      v-show="picBoxFull"
      :class="['pic_contcnt_full_box']"
      @wheel="handleZoom"
      @click="handleClickOutside"
    >
      <vue-draggable-resizable>
        <img
          @click.stop
          :style="{ filter: `brightness(${brightness})`, transform: `scale(${zoomLevel / 100})` }"
          :src="viewfinderPic"
        />
      </vue-draggable-resizable>

      <!-- 操作按钮 -->
      <div class="pic_action_box" @click.stop>
        <!-- 增加亮度 -->
        <el-tooltip :content="$t('caseorder.anli130')" placement="top">
          <div class="pic_action pic_action_1 pic_action_active" @click="picAction('1')">
            <img
              v-show="brightness <= 1.5"
              src="@/assets/img/icon/Brightness increase_1.png"
              alt=""
            />
            <img
              v-show="brightness > 1.5"
              src="@/assets/img/icon/Brightness increase_3.png"
              alt=""
            />
          </div>
        </el-tooltip>

        <el-tooltip :content="$t('caseorder.anli131')" placement="top">
          <!-- 降低亮度 -->
          <div class="pic_action pic_action_2 pic_action_active" @click="picAction('2')">
            <img
              v-show="brightness >= 0.5"
              src="@/assets/img/icon/Decreased brightness_1.png"
              alt=""
            />
            <img
              v-show="brightness < 0.5"
              src="@/assets/img/icon/Decreased brightness_3.png"
              alt=""
            />
          </div>
        </el-tooltip>

        <el-tooltip :content="$t('caseorder.anli133')" placement="top">
          <!-- 全屏 -->
          <div class="pic_action pic_action_3 pic_action_active" @click="picAction('3')">
            <img src="@/assets/img/icon/exit_amplify.png" alt="" />
          </div>
        </el-tooltip>
      </div>
    </div>
    
  </div>
</template>

<script>
import Cookies from 'js-cookie';

import QRCode from 'qrcodejs2';
import Clipboard from 'clipboard';
import ReportResult from './reportresult.vue'; // 报告审核结果页
import OrderDetail from './detail.vue'; // 订单详情
import Message from './message.vue'; // 消息
import Fangan from './fangan.vue'; // 方案
import Download from './download.vue'; // 下载
import Processing from './processing.vue'; // 加工信息
import Delivery from './delivery.vue'; // 发货
import ReportPreview from './common/reportPreview'; //
import AuditReport from './auditReport.vue';
import UploadDesigns from '@/views/caseorder/uploaddesigns.vue'; // 上传设计
import OrderSend from '@/views/caseorder/ordersend.vue'; // 物流
import madeScreenshots from '@/views/order/common/madeScreenshots';
import VueDraggableResizable from 'vue-draggable-resizable';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
export default {
  name: 'BLZMasterIndex',
  components: {
    ReportResult,
    OrderDetail,
    Message,
    Download,
    Processing,
    Delivery,
    ReportPreview,
    AuditReport,
    Fangan,
    UploadDesigns,
    OrderSend,
    madeScreenshots,

    VueDraggableResizable,
  },
  data() {
    return {
      fanganArr: [],
      activeName: 'first',
      publicPath: process.env.BASE_URL,
      count: 'http://blz.qixiuu.com/#/mobileTerminal?id=19',
      dialogVisible: false,
      dataObj: {}, // 详情数据
      imgUrl: '',
      mouthImgs: [],
      user_organizedRoleId: '', // 权限id
      orderForm: {
        orderId: 0, // 订单id
        content: '', // 内容
        imgUrl: '', // 图片地址
        orderDesignAutoCheck: false,
      },
      selectDataAuditListArr: [], // 右侧数据
      dropdownoptions: [
        {
          value: '1',
          label: this.$t('add.add160'),
        },
        {
          value: '2',
          label: this.$t('add.add161'),
        },
      ],
      dropdownvalue: '1',
      auditReportIsShow: false, // 审核报告
      loading: false,

      switchArr: [],
      jurisdictionIsShow: null,
      active: 1,

      mouthList: [], // 牙齿列表

      designList: [],

      diaImgUrl: '',
      organizedType: '',

      // 订单头部的保存row
      orderRow: {},
      isExamine: '',
      // orderForm: {
      //   id: '',
      //   skillDeptId: null,
      // },
      orderRules: {
        skillDeptId: [{ required: true, message: this.$t('caseorder.anli34'), trigger: 'change' }],
      },
      deptList: [], // 技工所数据

      // 定义不同按钮的loading控制

      cancleLoading: false,
      // 确认接单按钮loading（单独的）
      confirmOrderLoading: false,
      // 拒绝接单按钮loading（单独的）
      refuseOrderLoading: false,
      // 审核下单的按钮loading
      examineSubLoading: false,

      /***
       * 修改的审核报告部分
       */
      examineTyle: '',
      examineList: [
        {
          label: '数据完整性',
          value: '1',
        },
      ],

      res_form: {
        remarks: '',
        items: [],
      },
      res_form_show: false,
      modelCompleted: true,
      reportPreviewLoading: true,
      codeUrl: '',
      QRCode: null,
      isAudit: false,
      isConfirm: 'false',

      acitonType: '0',

      madeScreenshots: false,

      // 控制本订单压缩包是否过期
      isOverdue: false,

      // 控制过期弹框的显示
      overdueDialogVisible: false,
      // 控制提交的时候是不是冷数据
      submitOverdue: true,
      // 向预览组件传递的由什么组件转成gltf
      previewType: '',
      // 向预览组件传递口内相机是否禁用（false就是禁用）
      oralCameraDisplay: false,
      // 存储预览iframe的路由地址
      iframeSrc: '',
      isFullScreen: false,
      // 记录口内相机图片盒子是否全屏
      picBoxFull: false,
      zoomLevel: 100,
      viewfinderPic: '',
      // 存储图片的亮度
      brightness: 1,
      isDragging: false, // 是否正在拖动
      offsetX: 0,
      offsetY: 0,
      imageStyle: {
        position: 'absolute',
        left: '0px',
        top: '0px',
      },
      timer: null,
    };
  },
  props: {
    isOrderDownload: Boolean,
    id: Number,
  },

  created() {
  
    if (this.isOrderDownload) {
      this.orderForm.id = this.id;
    } else {
      this.isExamine = this.$route.query.isExamine;
      if (this.isExamine === 'true') {
        this.isExamin = true;
      } else if (this.isExamine === 'false') {
        this.isExamin = false;
      }
      this.isAudit = this.$route.query.isAudit;
      this.isConfirm = this.$route.query.isConfirm;
      this.orderForm.id = this.$route.query.id;
      this.isOverdue = this.$route.query.isOverdue;
      if (this.isOverdue === 'true') {
        this.isOverdue = true;
      } else if (this.isOverdue === 'false') {
        this.isOverdue = false;
      }
    }

    if (this.isExamine) {
      this.activeName = 'second';
    }
    if (this.isOrderDownload) {
      this.activeName = 'first';
    }
    if (!this.isExamine && !this.isOrderDownload) {
      this.activeName = localStorage.getItem('active_name');
    }
    if (this.isConfirm === 'true') {
      this.acitonType = '2';
    } else if (this.isConfirm === 'false') {
      this.acitonType = '1';
    }

    let submitOverdue = this.$route.query.submitOverdue;
    if (submitOverdue) {
      if (submitOverdue === 'true') {
        this.submitOverdue = true;
      } else if (submitOverdue === 'false') {
        this.submitOverdue = false;
      }
    } else {
      this.submitOverdue = false;
    }

   
    this.jurisdiction();
    this.getDeptList();

    // 接受ifame传递过来的信息
    this.getIfameInfo();
    this.toOrderVerify();
    this.timer = setInterval(() => {
      this.toOrderVerify();
    }, 1000 * 10);
  },
  mounted() {
    if (this.isExamine) {
      if (this.isOverdue) {
        this.activeName = 'fourth';
      } else {
        this.activeName = 'second';
      }
    }

    this.selectDataAuditList(this.orderForm.id);
    this.user_organizedRoleId = window.localStorage.getItem('user_organizedRoleId');
    this.organizedType = localStorage.getItem('user_organizedType'); // 1诊所 2技工所

    if (this.isExamine) {
      return false;
    }

    // 计算卡片的固定高度
    this.calcHeight();
  },

  methods: {
    toOrderVerify() {
      let id;
      if (this.$route.query.id) {
        id = this.$route.query.id;
      } else {
        id = this.id;
      }
      this.$http
        .get('/orderDownload/orderVerify?orderId=' + id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            let data = res.data;
            if (data) {
              this.$message({
                message: this.$t('caseorder.anli135'),
                type: 'warning',
              });
              setTimeout(() => {
                if (this.isOrderDownload) {
                  this.$router.push(`/orderManagement`);
                } else {
                  this.$router.push(`/caseorder`);
                }
              }, 500);
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    handleZoom(event) {
      // 判断鼠标滚轮方向，向上滚动放大，向下滚动缩小
      if (event.deltaY < 0) {
        // 放大
        this.zoomLevel = Math.min(this.zoomLevel + 10, 500); // 最大 500%
      } else {
        // 缩小
        this.zoomLevel = Math.max(this.zoomLevel - 10, 20); // 最小 20%
      }
    },
    handleClickOutside() {
      let iframe = document.getElementById('preview_iframe');
      this.picBoxFull = false;
      iframe.contentWindow.postMessage(
        {
          type: 'refreshPicBoxFull', // 消息类型
          data: this.picBoxFull,
        },
        '*',
      ); // 发送消息到 iframe
    },
    startDrag(event) {
      // 当鼠标按下时，开始拖动
      this.isDragging = true;

      // 记录鼠标相对于图片左上角的偏移量
      this.offsetX = event.clientX - parseInt(this.imageStyle.left);
      this.offsetY = event.clientY - parseInt(this.imageStyle.top);

      // 绑定鼠标移动和松开事件
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(event) {
      if (this.isDragging) {
        // 更新图片位置
        this.imageStyle.left = `${event.clientX - this.offsetX}px`;
        this.imageStyle.top = `${event.clientY - this.offsetY}px`;
      }
    },
    stopDrag() {
      // 鼠标松开时，停止拖动
      this.isDragging = false;

      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
    picAction(type) {
      let iframe = document.getElementById('preview_iframe');
      if (type === '1') {
        if (this.brightness <= 1.5) {
          this.brightness += 0.05;
        }
        iframe.contentWindow.postMessage(
          {
            type: 'refreshBrightness', // 消息类型
            data: this.brightness,
          },
          '*',
        ); // 发送消息到 iframe
      } else if (type === '2') {
        if (this.brightness >= 0.5) {
          this.brightness -= 0.05;
        }
        iframe.contentWindow.postMessage(
          {
            type: 'refreshBrightness', // 消息类型
            data: this.brightness,
          },
          '*',
        ); // 发送消息到 iframe
      } else if (type === '3') {
        this.picBoxFull = !this.picBoxFull;
        iframe.contentWindow.postMessage(
          {
            type: 'refreshPicBoxFull', // 消息类型
            data: this.picBoxFull,
          },
          '*',
        ); // 发送消息到 iframe
      }
    },

    getIfameInfo() {
      window.addEventListener('message', (event) => {
        let data = event.data;
        if (data.type === 'showAction') {
          this.showAction();
        }
        if (data.type === 'toFullScreen') {
          this.isFullScreen = data.data;
          let iframe = document.getElementById('preview_iframe');
          iframe.contentWindow.postMessage(
            {
              type: 'refreshCircle', // 消息类型
            },
            '*',
          ); // 发送消息到 iframe
        }
        if (data.type === 'setPicBoxFull') {
          this.picBoxFull = data.data.picBoxFull;
          this.viewfinderPic = data.data.viewfinderPic;
          this.brightness = data.data.brightness;
        }
      });
    },
    initIframeSrc() {

      this.iframeSrc = `${this.$config.ip}/#/preview?id=${this.orderForm.id}&isOrderDownload=${this.isOrderDownload}&previewType=${this.previewType}&oralCameraDisplay=${this.oralCameraDisplay}`;
    },
    isNull(data) {
      if (Object.keys(data).length > 0) {
        return true;
      } else {
        return false;
      }
    },
    openScreenshot(data) {
      this.res_form = data;
      this.madeScreenshots = true;
      let madeScreenshotsRef = this.$refs.madeScreenshots;
      madeScreenshotsRef.examineForm.description = '';
    },
    copyCodeUrl() {
      let click_sums = 0;
      const clipboard = new Clipboard('.copy-link'); // .copy-link为按钮或其他元素的class名称
      clipboard.on('success', (e) => {
        e.clearSelection(); // 清除选中内容
        click_sums++;

        if (click_sums === 1) {
          this.$message.success(this.$t('caseorder.anli96'));
        }
      });
      clipboard.on('error', () => {
        console.warn('无法复制到剪贴板！');
      });
    },
    showAction() {
      this.modelCompleted = true;

      if (this.isAudit === 'true') {
        this.changeState();
      }
    },
    calcHeight() {
      let order_info = document.getElementById('order_info');
      let top_card_h = document.getElementById('top_card').offsetHeight;

      order_info.style.height = `calc(100% - ${top_card_h}px - 50px)`;
    },
    getDeptList() {
      this.$http
        .get('/sys/organized/getOrganizedList?organizedType=2&id=' + this.orderForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.deptList = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    getFullscreenElement() {
      return (
        document['fullscreenElement'] ||
        document['mozFullScreenElement'] ||
        document['msFullScreenElement'] ||
        document['webkitFullscreenElement'] ||
        null
      );
    },
    goBack() {
      if (this.isOrderDownload) {
        this.$emit('colsePreview');
      } else {
        let data = JSON.parse(window.localStorage.getItem('caseorderData'));
        data['isCaseOrderDetail'] = true;
        window.localStorage.setItem('caseorderData', JSON.stringify(data));
        this.$router.push('/caseorder');
      }
    },

    // 订单处理
    orderHandle(row, type) {
      this.orderRow = row;
      if (type == 'upload') {
        // 上传设计
        this.$refs.uploaddesigns.form.id = row.id;
        this.$refs.uploaddesigns.dialogShow = true;
        this.$refs.uploaddesigns.uploadPercentage = 0;
      } else if (type == 'send') {
        // 发货
        this.$refs.ordersend.form.id = row.id;
        this.$refs.ordersend.dialogShow = true;
      } else if (type == 'xiadan') {
        if (this.submitOverdue) {
          // 冷数据
          // this.overdueDialogVisible = true;
          this.$message({
            message: this.$t('add.add076'),
            type: 'warning',
          });
        } else {
          this.$router.push(`/caseOrderDetail?id=${row.id}&isExamine=true&submitOverdue=false`);
          location.reload();
        }
        // 下单
      } else if (type == 'cancle') {
        this.cancleLoading = true;
        // 取消订单
        this.$confirm(this.$t('add.add28') + '?', this.$t('add.add140'), {
          confirmButtonText: this.$t('add.add142'),
          cancelButtonText: this.$t('add.add143'),
          type: 'warning',
        })
          .then(async () => {
            this.$http
              .post('/order/orderCancel', { id: row.id })
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  this.cancleLoading = false;
                  return this.$message.error(res.msg);
                } else {
                  this.cancleLoading = false;
                  this.$message.success(this.$t('add.add32'));
                  // this.getSelectPageList();
                  this.getSelectDetail();
                }
              })
              .catch((err) => {
                this.cancleLoading = false;
                console.log('err', err);
              });
          })
          .catch(() => {
            this.cancleLoading = false;
            this.$message({
              type: 'info',
              message: this.$t('add.add145'),
            });
          });
      }
    },
    
    /**
     * toDetail决定是否请求详情数据（用于返回取消loading）
     */
    getSelectPageList() {},

    // 单个保存
    saveAuditContent() {
      if (this.orderForm.content == '') {
        return this.$message.error(this.$t('add.add148'));
      }
      this.orderForm.orderId = this.dataObj.order.id;
      this.$http
        .post('/orderDataAudit/saveAuditContent', this.orderForm)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success(this.$t('caseorder.yulan.yulan120'));
            // this.$router.go(-1)
            this.selectDataAuditList(this.orderForm.id);
            this.orderForm = {
              content: '', // 内容
              imgUrl: '', // 图片地址
              orderDesignAutoCheck: false,
            };
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 拒绝接单
    orderReject() {
      this.$confirm(this.$t('caseorder.anli103'), {
        confirmButtonText: this.$t('add.add142'),
        cancelButtonText: this.$t('add.add143'),
        type: 'warning',
      }).then(() => {
        this.refuseOrderLoading = true;
        this.$http
          .post('/order/orderReject', { id: this.dataObj.order.id })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.refuseOrderLoading = false;
              return this.$message.error(res.msg);
            } else {
              this.refuseOrderLoading = false;
              this.$message.success(this.$t('add.add26'));
              this.getSelectDetail();
            }
          })
          .catch((err) => {
            this.refuseOrderLoading = false;
            console.log('err', err);
          });
      });
    },
    // 确认接单
    orderAffirm() {
      this.$confirm(this.$t('caseorder.anli102'), {
        confirmButtonText: this.$t('add.add142'),
        cancelButtonText: this.$t('add.add143'),
        type: 'warning',
      }).then(() => {
        this.confirmOrderLoading = true;
        this.$http
          .post('/order/orderAffirm', { id: this.dataObj.order.id })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.confirmOrderLoading = false;
              return this.$message.error(res.msg);
            } else {
              this.confirmOrderLoading = false;
              this.$message.success(this.$t('add.add27'));
              this.getSelectDetail();
            }
          })
          .catch((err) => {
            this.confirmOrderLoading = false;
            console.log('err', err);
          });
      });
    },
    selectDataAuditList(id) {
      this.$http
        .get(`/orderDataAudit/selectDataAuditList?id=${id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.selectDataAuditListArr = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // tab 切换
    handleClick(val) {
      if (val.name == 'six') {
        this.$refs.delivery.shippingList(this.orderForm.id);
      } else if (val.name == 'fourth') {
        this.selectDesignList();
      } else if (val.name === 'first') {
        let iframe = document.getElementById('preview_iframe');

        // let OrderPreviewRef = this.$refs.OrderPreview;
        this.$nextTick(() => {
          // OrderPreviewRef.updateRender();
          iframe.contentWindow.postMessage(
            {
              type: 'updateRender', // 消息类型
            },
            '*',
          ); // 发送消息到 iframe
        });
      }
    },
    // 报告返回按钮
    reportBackHandle() {
      this.orderForm.content = '';
      this.orderForm.imgUrl = '';
      this.orderForm.orderDesignAutoCheck = false;
    },
    // 二维码展示
    reportQRHandle() {
      this.dialogVisible = true;
      this.$nextTick(function () {
        this.bindQRCode();
      });
    },
    bindQRCode() {
      var languageType = localStorage.getItem('lang');
      if (languageType === undefined || languageType === null) {
        languageType = 'cn';
      }
      let user_realName = window.localStorage.getItem('user_realName');
      document.getElementById('qrCode').innerHTML = '';
      this.codeUrl = `${this.$config.ip}/#/reportPreview_phone?user_realName=${user_realName}&id=${
        this.orderForm.id
      }&languageType=${languageType.toString()}&token=${Cookies.get('token')}&timeZone=${
        this.$timeZone
      }`;
      this.QRCode = new QRCode(this.$refs.qrCodeDiv, {
        text: this.codeUrl,
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.L, // 容错率，L/M/H
      });
    },
    // 打印
    reportPrintHandle() {
      console.log('调打印机');
      if (!this.auditReportIsShow) {
        this.$message.error('请打开审核报告');
      }
      // this.$refs.ReportPreview.dialogShow = true;
    },
    // 取消
    reportcancleHandle() {
      this.auditReportIsShow = false;
    },

    // 点击刷新
    refresh() {
      localStorage.setItem('active_name', this.activeName);
      window.location.reload();
    },
    changeState() {
      this.getSelectDetail(() => {
        this.openExamine(this.dataObj);
      });
    },
    // 获取订单详情
    getSelectDetail(callack) {
      this.auditReportIsShow = false;
      this.adaption();
      var languageType = localStorage.getItem('lang');
      if (languageType === undefined || languageType === null) {
        languageType = 'cn';
      }
      this.$http
        .get(
          `/order/selectDetail?id=${
            this.orderForm.id
          }&languageType=${languageType.toString()}&token=${Cookies.get('token')}&timeZone=${
            this.$timeZone
          }`,
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.dataObj = res.data;
            this.previewType = res.data.order.previewType;
          
            this.oralCameraDisplay = res.data.order.oralCameraDisplay;
            this.initIframeSrc();
            this.$nextTick(() => {
              this.$refs.orderDetail.dataObj = res.data;

              if (res.data.order.imgs) {
                this.$refs.orderDetail.getBase64Image(res.data.order.imgs, (dataURL) => {
                  this.$refs.orderDetail.imgUrl = dataURL;
                  this.imgUrl = dataURL;
                });
              }
              if (res.data.order.designConfirmState === 0) {
                this.orderForm.orderDesignAutoCheck = true;
              } else {
                this.orderForm.orderDesignAutoCheck = false;
              }

              if (res.data.order.mouthImgs) {
                let count = 0;
                const newMouthImgs = JSON.parse(res.data.order.mouthImgs);
                newMouthImgs.forEach((item) => {
                  count++;
                  if (item.url) {
                    this.$refs.orderDetail.getBase64Image(item.url, (dataURL) => {
                      item.url = dataURL;
                    });
                  }
                });
                if (count == newMouthImgs.length) {
                  this.$refs.orderDetail.mouthImgs = newMouthImgs;
                  this.mouthImgs = newMouthImgs;
            
                }
              }
              callack && callack();
            });
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 设计管理
    handleCommand(command) {
      let url;
      if (command.command == 'a') {
        url = '/order/orderAffirmDesign';
      } else if (command.command == 'b') {
        url = '/order/orderAgainDesign';
      } else if (command.command == 'c') {
        url = '/order/orderAffirmLogistics';
      } else if (command.command == 'd') {
        url = '/order/orderAgainLogistics';
      }
      this.$http
        .post(url, { id: command.id })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success(this.$t('add.add37'));
            this.getSelectDetail();
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    beforeHandleCommand(id, command) {
      return {
        id: id,
        command: command,
      };
    },
    // 更改审核报告
    audiChildren(val) {
      this.auditReportIsShow = val;
      this.madeScreenshots = false;
      this.adaption();
    },
    // 定义一个方法更新模型的自适应
    adaption() {
      this.$nextTick(() => {
        let iframe = document.getElementById('preview_iframe');
        if (iframe) {
          iframe.contentWindow.postMessage(
            {
              type: 'updateRender', // 消息类型
            },
            '*',
          ); // 发送消息到 iframe
        }
      });
    },

    exportPdf() {
      this.$refs.ReportPreview.toExportPdf();
    },
    // 拿审核权限 skillDeptId
    jurisdiction() {
      this.jurisdictionIsShow = localStorage.getItem('user_auditReportState');
      this.getSelectDetail();
    },
    openExamineBox(dataObj) {
      this.acitonType = '';
      this.openExamine(dataObj);
    },
    // 打开审核组件
    openExamine(dataObj) {
      this.madeScreenshots = false;

      if (this.dataObj.order.orderStatus == 1) {
        /***
         *
         * 这里还要加上是审核报告的编辑状态
         *
         * 诊所: 只有添加到技工所机构待接单的状态才能编辑，其它情况下如果有审核报告就只能预览（诊所只能预览）
         * 技工所: 只有待接单的状态才能编辑，其它情况下如果有审核报告就只能预览
         *
         *
         * ***/
        if (this.organizedType == 1) {
          this.auditReportIsShow = !this.auditReportIsShow;
          // 诊所（只能查看）
          this.isEdit = false;
          this.adaption();
        } else if (this.organizedType == 2) {
          // 技工所
          if (dataObj.order.orderStatus == 1) {
            // 待接单才能编辑
            this.isEdit = true;
            if (!this.auditReportIsShow) {
              let user_realName = window.localStorage.getItem('user_realName');
              this.$http
                .get(
                  `/digitalImpression/editingStatusCompleted?orderId=${this.orderForm.id}&curUser=${user_realName}`,
                )
                .then(({ data: res }) => {
                  if (res.code !== 0) {
                    return this.$message.error(res.msg);
                  } else {
                    if (res.data.DigitalImpression === '1') {
                      // 有人编辑
                      return this.$message.error(
                        `${res.data.DigitalImpressionEditor}正在编辑中,请稍后重试！`,
                      );
                    } else {
                      // 没人编辑
                      this.auditReportIsShow = !this.auditReportIsShow;
                      this.adaption();
                    }
                  }
                })
                .catch((err) => {
                  console.log('err', err);
                });
            } else {
              this.auditReportIsShow = !this.auditReportIsShow;
              this.adaption();
            }
          } else {
            this.isEdit = false;
            this.auditReportIsShow = !this.auditReportIsShow;
            this.adaption();
          }
        }
      } else if (
        this.dataObj.order.orderStatus === 2 ||
        this.dataObj.order.orderStatus === 3 ||
        this.dataObj.order.orderStatus === 8 ||
        this.dataObj.order.orderStatus === 4 ||
        this.dataObj.order.orderStatus === 6
      ) {
        this.auditReportIsShow = !this.auditReportIsShow;
        this.adaption();
        this.$http
          .get('/sys/dict/data/showDictData?dictTypeId=' + this.dataObj.order.reportType)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            } else {
              const formData = new FormData();
              formData.append('orderId', this.orderForm.id);
              this.$http
                .post(
                  '/digitalImpression/showDigitalImpression?reportType=' +
                    this.dataObj.order.reportType,
                  formData,
                )
                .then(({ data: echoRes }) => {
                  if (echoRes.code !== 0) {
                    return this.$message.error(echoRes.msg);
                  } else {
                    let res_form = JSON.parse(JSON.stringify(this.res_form));
                    if (echoRes.data.data && echoRes.data.data.length > 0) {
                      res_form.remarks = echoRes.data.data[0].notes;
                      res_form.reportTime = echoRes.data.data[0].reportTime;
                      res_form.checker = echoRes.data.data[0].checker;
                    } else {
                      res_form.remarks = '';
                      res_form.reportTime = '';
                      res_form.checker = '';
                    }
                    res_form.items = res.data;

                    let checkCount = 0;
                    if (res_form.items && res_form.items.length > 0) {
                      res_form.items.forEach((item) => {
                        if (echoRes.data.data && echoRes.data.data.length > 0) {
                          item['check'] = echoRes.data.data[0][item.keyItem];
                          item['check'] = item['check'] === '1' ? true : false;
                          if (item['check']) {
                            checkCount++;
                          }
                        } else {
                          item['check'] = false;
                        }

                        item['list'] = [];
                        if (
                          echoRes.data &&
                          echoRes.data.reportTypeItem &&
                          echoRes.data.reportTypeItem.length > 0
                        ) {
                          echoRes.data.reportTypeItem.forEach((item1) => {
                            if (item1.reportTypeItem === item.id) {
                              item['list'].push({
                                examineTyle: item1.reportTypeItem,
                                description: item1.problemDescription,
                                picPath: item1.fileUrl,
                                id: item1.id,
                                check: false,
                              });
                            }
                          });
                        }
                      });
                    }
                    if (checkCount === res_form.items.length) {
                      res_form['isCheckAll'] = true;
                    } else {
                      res_form['isCheckAll'] = false;
                    }
                    this.res_form = JSON.parse(JSON.stringify(res_form));

                    this.reportPreviewLoading = false;
                  }
                })
                .catch((err) => {
                  this.cancleLoading = false;
                  this.reportPreviewLoading = false;
                  console.log('err', err);
                  this.adaption();
                });
            }
          })
          .catch((err) => {
            console.log('err', err);
            this.reportPreviewLoading = false;
            this.adaption();
          });
      }
      let iframe = document.getElementById('preview_iframe');
      iframe.contentWindow.postMessage(
        {
          type: 'onWindowResize', // 消息类型
        },
        '*',
      ); // 发送消息到 iframe
    },
    changeScreenshotData(data) {
      let res_form = JSON.parse(JSON.stringify(this.res_form));
      res_form.items.forEach((item) => {
        if (item.id === data.examineTyle) {
          if (item.list && item.list.length === 10) {
            return this.$message({
              message: this.$t('caseorder.anli100'),
              type: 'warning',
            });
          } else {
            this.$message({
              message: this.$t('caseorder.anli101'),
              type: 'success',
            });
            item.list.push({
              examineTyle: data.examineTyle,
              description: data.description,
              picPath: data.picPath,
            });
          }
        }
      });

      this.madeScreenshots = false;
      let auditReportRef = this.$refs.auditReport;
      auditReportRef.res_form = JSON.parse(JSON.stringify(res_form));
    },
    selectDesignList() {
      this.$http
        .post('/order/selectDesignList', { orderId: this.orderForm.id })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.designList = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    deleteItem(id) {
      this.$confirm(this.$t('caseorder.yulan.yulan121'), this.$t('add.add140'), {
        confirmButtonText: this.$t('add.add142'),
        cancelButtonText: this.$t('add.add143'),
        type: 'warning',
      })
        .then(async () => {
          this.$http
            .get(`/orderDataAudit/del?id=${id}`, {})
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('add.add66'));
                this.selectDataAuditList(this.orderForm.id);
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('add.add145'),
          });
        });
    },
    getIsOverdue(val) {
      // this.isOverdue = val;
      // this.activeName = 'second';
      this.submitOverdue = val;
    },
    // 审核页面的下单
    submitHandle() {
      this.$refs['orderForm'].validate((valid) => {
        if (valid) {
          if (this.submitOverdue) {
            // 冷数据
            this.$message({
              message: this.$t('add.add076'),
              type: 'warning',
            });
            return false;
          }
          let param = JSON.parse(JSON.stringify(this.orderForm));

          if (param.orderDesignAutoCheck) {
            param.orderDesignAutoCheck = 0;
          } else {
            param.orderDesignAutoCheck = 1;
          }
          this.examineSubLoading = true;

          this.$http
            .post('/order/orderPlaceAnOrder', param)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                if (res.code == 27026) {
                  let needArr = this.deptList.filter((f) => f.id === this.orderForm.skillDeptId);
                  if (needArr && needArr.length > 0) {
                    let needObj = needArr[0];
                    // 机构已经被解散了
                    this.$alert(
                      `${this.$t('members.chengyuan82')}
                     【${needObj.name}】
                      ${this.$t('members.chengyuan83')}`,
                      this.$t('members.chengyuan38'),
                      {
                        confirmButtonText: this.$t('members.chengyuan31'),
                        callback: (action) => {
                          this.examineSubLoading = false;
                        },
                      },
                    );
                  }
                  this.orderForm.skillDeptId = '';
                  this.getDeptList();

                  return false;
                }
                this.examineSubLoading = false;
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('add.add36'));
                this.getSelectDetail();
                this.examineSubLoading = false;
                // this.jgsdialogShow = false;
                this.orderForm = {
                  id: '',
                  skillDeptId: null,
                  orderDesignAutoCheck: false,
                };
                this.$router.push('/caseorder');
                // location.reload();
              }
            })
            .catch((err) => {
              this.examineSubLoading = false;
              console.log('err', err);
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style lang="scss">
.fullScreen {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 8;
}

.pic_contcnt_full_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(0 0 0 / 50%);

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  overflow: hidden;

  .draggable {
    width: auto !important;
    height: auto !important;
    cursor: move;
  }

  .handle {
    display: none !important;
  }

  .vdr {
    border: none;
  }

  .pic_action_box {
    width: 150px;
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    right: 50%;
    top: 60px;
    transform: translate(50%, 0);

    .pic_action {
      cursor: pointer;
      background: #e6ebef;
      width: 30px;
      height: 30px;

      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 90%;
      }
    }
  }
}

.order_detail,
.order_detail_row,
.order_detail_content,
.order_audit_report {
  height: 100%;
}

.order_detail {
  user-select: none;
  /* 阻止元素被选中 */
  -webkit-touch-callout: none;
  /* 阻止长按时显示菜单（iOS Safari）*/
  -moz-user-select: -moz-none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
}

.report_preview_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;

  img {
    display: inline-block;
    width: 30px;

    margin-right: 5px;
    cursor: pointer;
  }
}

.order_detail {
  > div {
    height: 100%;
  }

  .el-tabs__header {
    height: 50px;
  }

  .el-tabs__content {
    height: calc(100% - 50px);

    .el-tab-pane {
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}

.top_nav {
  position: relative;
  overflow: initial;
  // height: 120px;

  .back_box {
    position: absolute;
    width: 39px;
    height: 39px;
    left: -20px;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
  }

  .content_box {
    padding: 0px 0px 0px 30px;

    > .el-row {
      display: flex;
      align-items: center;

      .el-col {
        height: 30px;

        > div {
          height: 100%;

          > div {
            height: 100%;
            display: flex;
            align-items: center;

            > div {
              height: 100%;

              > div {
                height: 100%;

                > .el-button--small {
                  height: 100%;
                }
              }
            }
          }
        }
      }

      .el-form-item {
        margin-bottom: 0px;
      }
    }

    .order_box {
      .el-form-item__label {
        font-size: 16px;
        font-weight: 500;
        line-height: 26px;
        color: #333;
      }

      .el-form-item {
        display: flex;
        align-items: center;
      }

      .select_jgs {
        .el-form-item__content {
          width: 120px;
        }

        .el-form-item__label {
          margin-top: 5px;
        }
      }
    }
  }

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    img {
      width: 28px;
      height: 28px;
      margin-right: 8px;
    }

    span {
      font-size: 16px;
      font-weight: 500;
      line-height: 26px;
      color: #333;
    }

    .fanhui {
      border: 1px solid #ececec;
      cursor: pointer;
      border-radius: 6px;
      width: 60px;
      font-size: 12px;
      line-height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 12px;
    }
  }

  .title_info {
    display: flex;
    align-items: center;

    .title_info_item {
      padding-right: 10px;
      margin-right: 10px;
      border-right: 2px solid #dadee1;
    }

    .report_item {
      margin-left: 100px;

      .el-button--small {
        height: 100%;
        display: flex;
        align-items: center;
      }
    }

    span {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #666;
    }
  }

  .action_box {
    .el-dropdown {
      font-size: 12px;
      margin-right: 10px;
    }
  }

  .status_box {
    position: absolute;
    top: 0px;
    right: 0px;

    .status_item {
      span {
        display: inline-block;
        padding: 0 10px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: #003e67;
        color: #ffffff;
      }
    }
  }
}

#order_info {
  margin-top: 20px;
  position: relative;
  height: calc(100% - 140px);

  .preview_box {
    height: 100%;
    position: relative;

    .preview_iframe {
      width: 100%;
      height: 99.5%;
      border: none;
    }
  }

  .el-card__body,
  .el-tabs {
    height: 100%;
  }

  .refresh {
    position: absolute;
    cursor: pointer;
    top: 50%;
    right: 20px;
    top: 30px;
    display: flex;
    align-items: center;

    img {
      margin-right: 5px;
      width: 18px;
      height: 14px;
    }
  }
}

.full-screen {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 9999;
  border: 2px solid red;
}

.home-content {
  position: fixed;
  top: 200px;
  right: 300px;
}

.select-item-color {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  margin: 10px;
  display: inline-block;
  cursor: pointer;
  border-radius: 10px;
}

.select-item-text {
  cursor: pointer;
  margin-right: 10px;
}

.select {
  display: flex;
}

// .inputDeep{
//     background-color: red;
// }
// .inputDeep>>>.el-textarea__inner {
//     border: none;
//     resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
//   }
// .inputDeep {
//     border: none
//                 // :deep(.el-textarea__inner) {
//                 // box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
//                 // resize: none;
//                 // cursor: default;
//                 // }
//             }
.qr-code {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dia-img {
  width: 660px;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;

  .img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.qrCode_box {
  text-align: center;
  margin-top: 10px;
}
</style>
